<!doctype html>
<html>
	<head>
    	<meta charset="utf-8">
        <title>test</title>
        <script src="//cdn.bootcss.com/vue/2.0.6/vue.js"></script>
        <script type="text/javascript">
			Vue.config.devtools = true
			var ls=[{'label':'1024','url':'aa'},
			         {'label':'2048','url':''}]
			var ls_tmp=[{'label':'1024','url':'xxx'},
             			{'label':'2048','url':'xxx'}]
                               
         window.onload=function () {
         	new Vue({
	        	el:'#hello',
	        	data:{
		        	im_ls:[],
		        	loginType:'nnn',
		        	hehe:''
	        	},
				methods:{
					load_ls:function () {
						this.im_ls=ls
					},
					load_tmp:function () {
						this.im_ls=ls_tmp
					},
					sswitch:function () {
						if(this.loginType=='username'){
							this.loginType='nnn'
						}else{
							this.loginType='username'
						}
					}
				}
        	})
         }
        </script>
    </head>
    <body>
        <div id='hello'>
	        <button  type="button" @click='load_ls()'>load_ls</button>
	        <button  type="button" @click='load_tmp()'>load_tmp</button>
			<span v-for='image in im_ls'> 
				<span v-if='image.url' v-text='image.label' key='jj'></span>
				<span v-else v-text='image.label' style='background-color: #999;' key='ff'></span>
			</span>
			<div>
				<button name="test" type="button" value="val" @click='sswitch()'>Button Text</button>
				<template v-if="loginType === 'username'">
				  <label>Username</label>
				  <input placeholder="Enter your username" v-model='hehe'>
				</template>
				<template v-else>
				  <label>Email</label>
				  <input placeholder="Enter your email address" v-model='hehe' style='background-color: #999;'>
				</template>
			</div>
			
		</div>
    </body>
</html>